<template>
  <div>
    <h2>类型管理</h2>
    <div class="search-box">
      <el-input
        type="text"
        style="width: 300px; margin-bottom: 20px"
        v-model="searchTypeName"
        placeholder="请输入类型名称"
      />
      <SingleButton @click="showAddDialog = true" class="btn" text="新增类型" />
    </div>

    <el-table
      class="type-table"
      :data="displayTypeList"
      style="width: 100%; height: calc(100vh - 260px)"
    >
      <el-table-column prop="id" label="类型列表" width="200" />
      <el-table-column prop="type" label="类型名称" width="800" />
      <el-table-column class="operation" fixed="right" label="操作" width="300">
        <template #default="item">
          <div class="operation">
            <SingleButton text="编辑" @click="editType(item.row)" />
            <SingleButton text="删除" @click="deleteType(item.row.id)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      v-model="showAddDialog"
      :title="isEdit ? '编辑类型' : '新增类型'"
      :show-close="false"
    >
      <el-form :model="currentType" label-width="80px" @submit.prevent>
        <el-form-item label="类型名称" class="type-form-item">
          <el-input v-model="currentType.type" class="type-input"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="saveType">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton
} from 'element-plus'
import SingleButton from '@/components/SingleButton.vue'
import { useGoodsStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'

const goodsStore = useGoodsStore()
const filterTypesList = computed(() => goodsStore.typesList.filter(item => item.type !== '全部'))
// 类型列表
const typeList = ref(filterTypesList.value)
// 控制对话框显示
const showAddDialog = ref(false)
// 当前操作的类型对象
const currentType = ref({ id: null, type: '' })
// 是否为编辑状态
const isEdit = ref(false)
// 搜索关键词
const searchTypeName = ref('')

// 计算属性，根据搜索关键词筛选类型列表
const displayTypeList = computed(() => {
  if (!searchTypeName.value) {
    return typeList.value
  }
  return typeList.value.filter(type => type.type.includes(searchTypeName.value))
})

// 编辑
const editType = type => {
  isEdit.value = true
  currentType.value = { ...type }
  showAddDialog.value = true
}

// 删除
const deleteType = id => {
  goodsStore.delType(id)
  typeList.value = filterTypesList.value
  showPrompt('删除成功', 'success')
}

// 保存
const saveType = () => {
  if (isEdit.value) {
    goodsStore.modifyType(currentType.value.id, currentType.value.type)
    showPrompt('修改成功', 'success')
  } else {
    // 新增操作
    goodsStore.addType({ type: currentType.value.type })
    typeList.value = filterTypesList.value
    showPrompt('添加成功', 'success')
  }
  showAddDialog.value = false
  isEdit.value = false
  currentType.value = { id: null, type: '' }
}
</script>

<style scoped>
h2 {
  margin-bottom: 40px;
}

.operation {
  display: flex;
  gap: 10px;
}

.search-box {
  display: flex;
}

.search-box .btn {
  height: 32px;
  margin-left: 20px;
  font-size: 14px;
}
.type-input {
  width: 100px;
  padding-top: 1px;
}
.type-form-item {
  margin-top: 40px;
}
</style>
